<template>
    <view class="love-name">
          <view class="item-view" :style="{ 'background-image': 'url(' + head + ')' }" ></view>
          <view class='item-view' :style="{ 'background-image': 'url(' +input + ')' }" ></view>
          <view class='item-view' :style="{ 'background-image': 'url(' + bottom + ')' }" ></view>
    
          <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
          <Result v-else :content="content" v-model:defStatus="defStatus"  />
      </view>
  
    <Roast />
    <Recommend :top='98' v-if="defStatus === EnumStatus.RESULT"  />
    <ToDY />
  </template>
  
  <script setup lang="ts">
  import { EnumStatus } from "@/utils/constants";
  import Start from "./components/Start.vue";
  import Result from "./components/Result.vue";
  
  import Roast from "@/components/Roast/Roast.vue";
  import Recommend from "@/components/Recommend/Recommend.vue";
  import ToDY from "@/components/ToDY/ToDY.vue";

  const defStatus = ref(EnumStatus.STATUS)
  const content = ref()
  const head = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/926b447f642435b2dc2ebdfe1776a44e.png' 
      : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/53f94a4b63579ab6cf99d7fcfa504029.png'
  })
  const bottom = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/bd1264bf34ec55199b3b355ab17fbe5c.png'
      : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/e23e630aacb3bdb7608c25d5c0a7ca7a.png'
  })
  const input = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/1650971537d9c0937e7eeae8a0fc48b1.png'
      : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/3d04900d1e42fe1df1e6073758b45bc1.png'
  })
  </script>
  
  <style>
  page{
      width: 100%;
      height: 100%;
  }
  
  </style>
  
  <style lang="scss" scoped>
  .love-name{
      width: 100%;
      height: 100%;
      .item-view{
          width: 100%;
          height: 33.4%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
      .yes-view{
          width: 100%;
          height: 50%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
      .yet-view{
          width: 100%;
          height: 50%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
  }
  
  </style>
  
